<template>
    <a-tabs class="chartDef" default-active-key="styles" size="small">
        <a-tab-pane key="styles" :tab="commonI18n('componentStyle.style','风格')">
            <component-style v-if="!isDialog" :curComponent="curComponent"></component-style>
            <chart-style :screenConfig="screenConfig"></chart-style>
        </a-tab-pane>
        <a-tab-pane key="dataSources" :tab="commonI18n('componentStyle.data','数据')"
                    v-if="config.chartType!='customChart'">
            <div class="chartDef-dataSource">
                <a-form-item :label="commonI18n('dataSource','数据来源')">
                    <a-radio-group v-model:value="config.dataSources.source" default-value="dynamic">
                        <a-radio value="static">{{ commonI18n('staticData', '静态数据') }}</a-radio>
                        <a-radio value="dynamic">{{ commonI18n('dynamicData', '动态数据') }}</a-radio>
                    </a-radio-group>
                </a-form-item>
                <div v-if="config.dataSources.source=='static'" style="margin:10px 0px 0px 10px">
                    <a-button @click="setStaticData" style="margin-right: 5px;">{{ commonI18n('config', '配置') }}
                    </a-button>
                    <a-tag color="green" v-if="config.dataSources.staticData">
                        {{ commonI18n('configured', '已配置') }}
                    </a-tag>
                    <a-tag color="red" v-else>{{ commonI18n('notConfigured', '未配置') }}</a-tag>
                </div>
                <div class="dataSources-common" v-else>
                    <!--配置项-->
                    <div class="dataSources-common-left">
                        <BasicsConfig :config="config" :isDialog="isDialog" :modelConfig="modelConfig"></BasicsConfig>
                    </div>
                    <div class="dataSources-common-right">
                        <!--数据模型-->
                        <data-model
                            :dataModel="dataModel"
                            :config="config"
                            :modelConfig="modelConfig"
                            :getDataModel="getDataModel"
                            :dimensionStart="dimensionStart"
                            :dimensionEnd="dimensionEnd"
                            :measureStart="measureStart"
                            :measureEnd="measureEnd"
                            :hideDimensions="false"
                        ></data-model>
                    </div>
                </div>
            </div>
        </a-tab-pane>
        <a-tab-pane key="advancedConf" :tab="commonI18n('componentStyle.advanced','高级')"
                    v-if="showAdvanced && config.chartType!='customChart' && config.dataSources.source!='static'">
            <a-form layout="vertical">
                <ChartAdvConfig v-if="!isDialog" :screenConfig="screenConfig"></ChartAdvConfig>
                <!--刷新配置-->
                <refresh-config></refresh-config>
                <!--预警-->
                <forewarning-config v-if="forewarningList.includes(config.chartType)"></forewarning-config>
            </a-form>
        </a-tab-pane>
    </a-tabs>
</template>

<script>
/**
 * 图表组件配置
 */


import BasicsConfig from "./common/basics-config.vue"
import chartDef from "./common/chart-def";
import ChartStyle from "./common/chart-style.vue"
import DataModel from "./common/data-model.vue";
import ForewarningConfig from "./common/forewarning-config.vue"
import RefreshConfig from "@/views/modules/design/right-component/common/refresh-config.vue";
import ChartAdvConfig from "@/views/modules/design/right-component/common/chart-adv-config.vue";

export default {
    name: "ChartDef",
    mixins: [chartDef],
    props: {
        isDialog: {
            default: false
        },
        showAdvanced: {
            default: true
        },
    },
    components: {
        DataModel,
        BasicsConfig,
        ChartAdvConfig,
        ChartStyle,
        RefreshConfig,
        ForewarningConfig
    },
    data() {
        return {
            forewarningList: ['generalBar', 'horizontalBar', 'stackedBar', 'lineChart', 'areaChart', 'stackedArea', 'lineBar']
        }
    }
}
</script>

<style scoped>
.chartDef >>> stylesCommon {
    margin: 0px !important;
}

.dataSources-common {
    width: 100%;
    flex: 1;
    display: flex;
    border: 1px solid #dadde0;
    border-radius: 5px;
    overflow: auto;
}

.dataSources-common-left {
    flex: 1;
    padding:0px 10px;
    border-right: 1px solid #dadde0;
    overflow: auto;
}

.dataSources-common-right {
    flex: 1;
    overflow: auto;
    padding:0px 10px;
}

.dataSources-common-right::-webkit-scrollbar-thumb {
    display: none;
}

.dataSources-common-right:hover::-webkit-scrollbar-thumb {
    display: block;
}
.chartDef-dataSource{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}
</style>
